import React from 'react';
import { connect } from 'dva';
import { Modal, Button, Table, Tag, message, Radio, Row, Col } from 'antd';
import Katex from '../../../components/_public/Katex';
import { getUniqueKey } from '../../../utils/formatDataSource';

const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;

@connect(({ lesson, loading }) => ({
  lesson,
  loading: loading.models.lesson,
  tableLoading: loading.effects['lesson/questionList'],
}))
class QuestionModal extends React.Component {
  state = {
    questionList: [],
    totalQuestions: 0,

    diqu: '全部',
    nianfen: '全部',
    laiyuan: '全部',
    tixing: '全部',
    sftj: '全部',
    hard: '全部',
    ckcd: '全部',
    nianji: '全部',
    sfhjx: '全部',
    tihao: '全部',

    use: '全部',
    selectedQuestion: [],
    selectedQuestionKeys: [],
    modalLoading: false,
  };
  componentDidMount = () => {
    this.getServerQuestions();
    this.props.onRef(this);
  };
  getServerQuestions = value => {
    const { dispatch, questiontypeId, where, existIdStr, type } = this.props;
    let {
      diqu,
      nianfen,
      laiyuan,
      tixing,
      sftj,
      hard,
      ckcd,
      nianji,
      sfhjx,
      tihao,
      use,
    } = this.state;
    if (where === 'liti') {
      use = '推荐例题';
    } else if (where === 'xiti') {
      use = '推荐习题';
    }
    let params = {
      questiontypeId,
      existIdStr,
      where,

      diqu,
      nianfen,
      laiyuan,
      tixing,
      sftj,
      hard,
      ckcd,
      nianji,
      sfhjx,
      tihao,

      use,
      type,
    };
    if (value && Object.keys(value).length > 0) {
      params = { ...params, ...value };
    }
    dispatch({
      type: 'lesson3/questionList',
      payload: params,
    }).then(() => {
      const { questionList, total } = this.props.lesson.questionListInfo;
      this.setState({
        questionList,
        totalQuestions: total,
      });
    });
  };
  columns = () => {
    return [
      {
        title: 'stem',
        dataIndex: 'stem',
        key: 'stem',
        width: '90%',
        render: value => <Katex value={value} />,
      },
      {
        title: '操作',
        key: 'action',
        width: '10%',
        render: item => {
          const one = this.state.selectedQuestion.find(q => q.id === item.id);
          return (
            <Row>
              <Col span={12}>
                {' '}
                <Tag color="#2db7f5" hidden={item.recommend !== '推荐'}>
                  推荐
                </Tag>
              </Col>
              <Col span={12}>
                <Tag color="#f50" hidden={one}>
                  未选
                </Tag>
                <Tag color="#87d068" hidden={!one}>
                  已选
                </Tag>
              </Col>
            </Row>
          );
        },
      },
    ];
  };
  rowSelection = () => {
    return {
      selectedRowKeys: this.state.selectedQuestionKeys,
      onChange: (selectedRowKeys, selectedRows) => {
        console.log('change...');
        console.log(selectedRowKeys, selectedRows);
        this.setState({
          selectedQuestion: selectedRows,
          selectedQuestionKeys: selectedRowKeys,
        });
      },
    };
  };
  onRow = record => {
    const { selectedQuestion, selectedQuestionKeys } = this.state;
    return {
      onClick: () => {
        const one = selectedQuestion.find(q => q.id === record.id);
        if (one) {
          const newQuestion = selectedQuestion.filter(q => q.id !== record.id);
          const newQuestionKey = selectedQuestionKeys.filter(k => k != record.key);
          this.setState({
            selectedQuestion: newQuestion,
            selectedQuestionKeys: newQuestionKey,
          });
        } else {
          selectedQuestion.push(record);
          selectedQuestionKeys.push(record.key);
          selectedQuestion.sort((a, b) => a.key - b.key);
          selectedQuestionKeys.sort((a, b) => a - b);
          this.setState({
            selectedQuestion: [...selectedQuestion],
            selectedQuestionKeys: [...selectedQuestionKeys],
          });
        }
      },
    };
  };

  tableChange = ({ current: page, pageSize }) => {
    console.log(page, pageSize);
    this.getServerQuestions({ page, pageSize });
  };
  modalOk = () => {
    this.setState({ modalLoading: true });
    setTimeout(() => {
      this.setState({ modalLoading: false });
      this.props.okModal(this.state.selectedQuestion);
      this.setState({
        selectedQuestion: [],
        selectedQuestionKeys: [],
      });
    }, 500);
  };
  modalCancel = () => {
    this.props.cancelModal();
    setTimeout(() => {
      this.setState({
        selectedQuestion: [],
        selectedQuestionKeys: [],
      });
    }, 100);
  };

  diquChange = ({ target: { value } }) => {
    this.setState({ diqu: value });
    this.getServerQuestions({ diqu: value });
  };
  nianfenChange = ({ target: { value } }) => {
    this.setState({ nianfen: value });
    this.getServerQuestions({ nianfen: value });
  };
  laiyuanChange = ({ target: { value } }) => {
    this.setState({ laiyuan: value });
    this.getServerQuestions({ laiyuan: value });
  };
  tixingChange = ({ target: { value } }) => {
    this.setState({ tixing: value });
    this.getServerQuestions({ tixing: value });
  };
  sftjChange = ({ target: { value } }) => {
    this.setState({ sftj: value });
    this.getServerQuestions({ sftj: value });
  };
  hardChange = ({ target: { value } }) => {
    this.setState({ hard: value });
    this.getServerQuestions({ hard: value });
  };
  ckcdChange = ({ target: { value } }) => {
    this.setState({ ckcd: value });
    this.getServerQuestions({ ckcd: value });
  };
  nianjiChange = ({ target: { value } }) => {
    this.setState({ nianji: value });
    this.getServerQuestions({ nianji: value });
  };
  sfhjxChange = ({ target: { value } }) => {
    this.setState({ sfhjx: value });
    this.getServerQuestions({ sfhjx: value });
  };
  tihaoChange = ({ target: { value } }) => {
    this.setState({ tihao: value });
    this.getServerQuestions({ tihao: value });
  };

  useChange = ({ target: { value } }) => {
    this.setState({ use: value });
    this.getServerQuestions({ use: value });
  };

  render() {
    const { questionList, totalQuestions } = this.state;
    const { visible } = this.props;
    const radioStyle = {
      float: 'left',
      marginTop: '0',
      marginRight: '3px',
    };
    const b1 = {
      marginTop: '5px',
    };
    return (
      <div>
        <Modal
          visible={visible}
          title="请选择添加题目"
          width="70%"
          onOk={this.modalOk}
          onCancel={this.modalCancel}
          footer={[
            <Button key="back" onClick={this.modalCancel}>
              取消
            </Button>,
            <Button
              key="submit"
              type="primary"
              onClick={this.modalOk}
              loading={this.state.modalLoading}
            >
              确认(已选{this.state.selectedQuestion.length})
            </Button>,
          ]}
        >
          <div hidden={this.props.where === 'in'}>
            <div style={b1}>
              <div style={radioStyle}>【地区】:</div>
              <RadioGroup onChange={this.diquChange} value={this.state.diqu} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="黄浦">黄浦</RadioButton>
                <RadioButton value="徐汇">徐汇</RadioButton>
                <RadioButton value="长宁">长宁</RadioButton>
                <RadioButton value="静安">静安</RadioButton>
                <RadioButton value="普陀">普陀</RadioButton>
                <RadioButton value="虹口">虹口</RadioButton>
                <RadioButton value="杨浦">杨浦</RadioButton>
                <RadioButton value="闵行">闵行</RadioButton>
                <RadioButton value="宝山">宝山</RadioButton>
                <br />
                <RadioButton value="嘉定">嘉定</RadioButton>
                <RadioButton value="浦东">浦东</RadioButton>
                <RadioButton value="金山">金山</RadioButton>
                <RadioButton value="松江">松江</RadioButton>
                <RadioButton value="青浦">青浦</RadioButton>
                <RadioButton value="奉贤">奉贤</RadioButton>
                <RadioButton value="崇明">崇明</RadioButton>
                <RadioButton value="卢湾">卢湾</RadioButton>
                <RadioButton value="闸北">闸北</RadioButton>
                <RadioButton value="上海统考">上海统考</RadioButton>
                <RadioButton value="学校卷">学校卷</RadioButton>
                <RadioButton value="非上海">非上海</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【年份】:</div>
              <RadioGroup onChange={this.nianfenChange} value={this.state.nianfen} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="2008">2008</RadioButton>
                <RadioButton value="2009">2009</RadioButton>
                <RadioButton value="2010">2010</RadioButton>
                <RadioButton value="2011">2011</RadioButton>
                <RadioButton value="2012">2012</RadioButton>
                <RadioButton value="2013">2013</RadioButton>
                <RadioButton value="2014">2014</RadioButton>
                <RadioButton value="2015">2015</RadioButton>
                <RadioButton value="2016">2016</RadioButton>
                <br />
                <RadioButton value="2017">2017</RadioButton>
                <RadioButton value="2018">2018</RadioButton>
                <RadioButton value="2019">2019</RadioButton>
                <RadioButton value="2020">2020</RadioButton>
                <RadioButton value="2021">2021</RadioButton>
                <RadioButton value="2022">2022</RadioButton>
                <RadioButton value="2023">2023</RadioButton>
                <RadioButton value="2024">2024</RadioButton>
                <RadioButton value="2025">2025</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【来源】:</div>
              <RadioGroup onChange={this.laiyuanChange} value={this.state.laiyuan} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="高考">高考</RadioButton>
                <RadioButton value="一模">一模</RadioButton>
                <RadioButton value="二模">二模</RadioButton>
                <RadioButton value="春考">春考</RadioButton>
                <RadioButton value="周考">周考</RadioButton>
                <RadioButton value="月考">月考</RadioButton>
                <RadioButton value="期末">期末</RadioButton>
                <RadioButton value="联考">联考</RadioButton>
                <RadioButton value="讲义">讲义</RadioButton>
                <RadioButton value="博览">博览</RadioButton>
                <RadioButton value="零距离">零距离</RadioButton>
                <RadioButton value="双基">双基</RadioButton>
                <RadioButton value="导学">导学</RadioButton>
                <RadioButton value="校本">校本</RadioButton>
                <RadioButton value="其他教辅">其他教辅</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【题型】:</div>
              <RadioGroup onChange={this.tixingChange} value={this.state.tixing} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="填空">填空</RadioButton>
                <RadioButton value="选择">选择</RadioButton>
                <RadioButton value="解答">解答</RadioButton>
                <RadioButton value="判断">判断</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【是否推荐】:</div>
              <RadioGroup onChange={this.sftjChange} value={this.state.sftj} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="推荐例题">推荐例题</RadioButton>
                <RadioButton value="推荐习题">推荐习题</RadioButton>
                <RadioButton value="加精1">加精1</RadioButton>
                <RadioButton value="加精2">加精2</RadioButton>
                <RadioButton value="普通题">普通题</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【难度】:</div>
              <RadioGroup onChange={this.hardChange} value={this.state.hard} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="基础">基础</RadioButton>
                <RadioButton value="容易">容易</RadioButton>
                <RadioButton value="中等">中等</RadioButton>
                <RadioButton value="困难">困难</RadioButton>
                <RadioButton value="超难">超难</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【常考程度】:</div>
              <RadioGroup onChange={this.ckcdChange} value={this.state.ckcd} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="高">高</RadioButton>
                <RadioButton value="中">中</RadioButton>
                <RadioButton value="低">低</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【年级】:</div>
              <RadioGroup onChange={this.nianjiChange} value={this.state.nianji} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="高一">高一</RadioButton>
                <RadioButton value="高二">高二</RadioButton>
                <RadioButton value="高三">高三</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【是否含解析】:</div>
              <RadioGroup onChange={this.sfhjxChange} value={this.state.sfhjx} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="是">是</RadioButton>
                <RadioButton value="否">否</RadioButton>
              </RadioGroup>
            </div>
            <div style={b1}>
              <div style={radioStyle}>【题号】:</div>
              <RadioGroup onChange={this.tihaoChange} value={this.state.tihao} size="small">
                <RadioButton value="全部">全部</RadioButton>
                <RadioButton value="0">0</RadioButton>
                <RadioButton value="1">1</RadioButton>
                <RadioButton value="2">2</RadioButton>
                <RadioButton value="3">3</RadioButton>
                <RadioButton value="4">4</RadioButton>
                <RadioButton value="5">5</RadioButton>
                <RadioButton value="6">6</RadioButton>
                <RadioButton value="7">7</RadioButton>
                <RadioButton value="8">8</RadioButton>
                <RadioButton value="9">9</RadioButton>
                <RadioButton value="10">10</RadioButton>
                <br />
                <RadioButton value="11">11</RadioButton>
                <RadioButton value="12">12</RadioButton>
                <RadioButton value="13">13</RadioButton>
                <RadioButton value="14">14</RadioButton>
                <RadioButton value="15">15</RadioButton>
                <RadioButton value="16">16</RadioButton>
                <RadioButton value="17">17</RadioButton>
                <RadioButton value="18">18</RadioButton>
                <RadioButton value="19">19</RadioButton>
                <RadioButton value="20">20</RadioButton>
                <br />
                <RadioButton value="21">21</RadioButton>
                <RadioButton value="22">22</RadioButton>
                <RadioButton value="23">23</RadioButton>
                <RadioButton value="24">24</RadioButton>
                <RadioButton value="25">25</RadioButton>
                <RadioButton value="26">26</RadioButton>
                <RadioButton value="27">27</RadioButton>
                <RadioButton value="28">28</RadioButton>
                <RadioButton value="29">29</RadioButton>
                <RadioButton value="20">30</RadioButton>
                <br />
                <RadioButton value="31">31</RadioButton>
                <RadioButton value="32">32</RadioButton>
                <RadioButton value="33">33</RadioButton>
                <RadioButton value="34">34</RadioButton>
                <RadioButton value="35">35</RadioButton>
                <RadioButton value="36">36</RadioButton>
              </RadioGroup>
            </div>
          </div>
          <div
            hidden={
              this.props.where === 'in' ||
              this.props.where === 'liti' ||
              this.props.where === 'xiti'
            }
          >
            <RadioGroup onChange={this.useChange} value={this.state.use} size="small">
              <RadioButton value="全部">全部</RadioButton>
              <RadioButton value="用过">用过</RadioButton>
              {/* <RadioButton value="精品">精品</RadioButton> */}
              <RadioButton value="推荐">推荐</RadioButton>
            </RadioGroup>
          </div>
          <Table
            columns={this.columns()}
            dataSource={questionList}
            showHeader={false}
            onChange={this.tableChange}
            rowSelection={this.rowSelection()}
            onRow={this.onRow}
            loading={this.props.tableLoading}
            pagination={{
              //   current: page,
              total: totalQuestions,
              showTotal() {
                return (
                  <span>
                    共 <a style={{ color: '#1893ab' }}>{totalQuestions}</a> 道
                  </span>
                );
              },
            }}
          />
        </Modal>
      </div>
    );
  }
}

export default QuestionModal;
